<template>
	<view>
		<view >
			<header-navback></header-navback>
			<add-sel-bg ref="add_sel_bg" from="statistics" :initBg="true" :clickShowMore="false"></add-sel-bg>
		</view>
		<view class="userinfo">
			<view class="top-user flex align-center" >
				<view class="left">
					<view class="headimg">
						<image class="headimg"  :src="info.avatar?info.avatar:'/static/images/member/default_headimg.jpg'"></image>
					</view>
				</view>
				<view class="right" >
					<view class="nickname">
						<text>{{info.nickname?info.nickname:'用户昵称'}}</text>
					</view>
				</view>
				<view class="right2" v-if="info.mobile" @tap="makePhone(info.mobile)">
					<text class="mobile">{{info.mobile}}</text>
				</view>
			</view>
		</view>
		<view class="content" >
			<view class="title">
				<view class="in-title">{{info.title}}</view>
			</view>
			<view class="show-info">
				<view class="left">
					<view class="desc">
						<text>{{info.createtime}}<text class="zhanwei-text"></text></text>
						<text>0次浏览<text class="zhanwei-text"></text></text>
						<text>0人参加</text>
					</view>
					<view class="desc end-time">
						<text>{{info.end_time}} 结束</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="add-button">
			<add-sel-button ref="add_sel_button" :onlyShow="true"></add-sel-button>
		</view>
		
		<view class="join-list">
			<view class="title">
				<view class="fl">参加记录</view>
				<view class="fr" @tap="changeOrder">{{joinListOrder[joinListOrderIndex].text}}</view>
			</view>
			<view class="list-item">
				
				<view  class="join-list-null">
					{{joinListEmpty}}
				</view>
			</view>
		</view>
		
		<view class="sub-button-list flex align-center" >
			<view class="sub-button fabu" @tap="submit" >立即参加</view>
		</view>
		<view class="zhanwei"></view>
		
	</view>
</template>

<script src="./detail-preview.js"></script>

<style lang="scss">
	.join-list{
		background: #ffffff;
		margin-top: 20rpx;
		padding: 20rpx;
		.list-item{
			.join-list-null{
				text-align: center;
				padding: 20rpx;
				margin-top: 30rpx;
				font-size: 26rpx;
				color: #666666;
			}
			
		}
		.title{
			height: 50rpx;
			.fl{
				font-weight: 600;
			}
			.fr{
				font-size: 24rpx;
				color: #999999;
				position: relative;
				padding-right: 32rpx;
				
			}
		}
	}
	/*详情页中间四个菜单样式*/
	.center-detail-btn{
		padding: 20rpx;
		background: #ffffff;
		text-align: center;
		.list-item{
			width: 25%;
			.image-icon{
				width: 50rpx;
				height: 50rpx;
			}
			.iconfont{
				font-size: 50rpx;
			}
			.desc{
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}
	.sub-button-list{
		position: fixed;
		bottom: 50rpx;
		width: 100%;
		.sub-button{
			letter-spacing: 2rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 50rpx;
		}
		.fabu{
			width: 90%;
			background: $uni-btn-color;
			margin-left: 5%;
			color: #FFFFFF;
			text-align: center;
		}
	}
	
	.content{
		margin-top: 100rpx;
		background: #ffffff;
		padding: 10rpx;
		.title{
			.in-title{
				height: 100%;
				padding-left: 10rpx;
				font-size: 34rpx;
			}
		}
		.show-info{
			margin-top: 20rpx;
			padding-left: 10rpx;
			.left{
				height: 50rpx;
				.desc{
					line-height: 50rpx;
					float: left;
					text{
						display: inline-block;
						font-size: 22rpx;
						color: #999999;
						padding-right: 20rpx;
						position: relative;
					}
					.zhanwei-text{
						width: 2rpx;
						height: 24rpx;
						background-color: #999999;
						padding: 0;
						position: absolute;
						top: 14rpx;
						right: 10rpx;
					}
				}
				.end-time{
					float: right;
				}
				
			}
		}
	}
	.userinfo{
		width: 100%;
		height: 120rpx;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		top: 440rpx;
		background: #fff;
		padding: 0 10rpx;
		.top-user{
			height: 120rpx;
			.right2{
				.mobile{
					display: inline-block;
					background: #C6DCEC;
					padding: 3rpx 20rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #515B5D;
					text-align: center;
					height: 38rpx;
					line-height: 38rpx;
				}
			}
			.right{
				height:100%;
				width: 436rpx;
				.nickname{
					font-size: 30rpx;
					height: 120rpx;
					color: #777777;
					overflow: hidden;
					display: flex;
					align-items: center;
					padding: 10rpx 10rpx 0 0;
				}
			}
			.left{
				.headimg{
					 overflow: hidden;
					 display: block;
					 margin: 0rpx;
					 margin-right: 10rpx;
					 border-radius: 20rpx;
					 border: 2rpx solid #fff;
					 width: 100rpx;
					 height: 100rpx;
				}
			}
		}
	}
	
</style>
